/**
 * create by young (young2f@outlook.com) on 2020/9/12
 */

'use strict';
import React from 'react';
import {connect} from 'dva/index';
import {Card, Col, DatePicker, Drawer, Form, Input, Row, Select, Statistic, Table, Tabs} from 'antd';
import ViewTitle from '../../components/ViewTitle';
import FormBase from '../../components/Base/FormBase';
import {FormField, SearchForm} from 'antd-extra';
import moment from 'moment';
import 'moment/locale/zh-cn';
import styles from '../index.less';
import ModalInboundOrderDetail from "../store/modal/ModalInboundOrderDetail";
import ProcureAssess from "./assess/ProcureAssess";
import PaymentAssess from "./assess/PaymentAssess";
import InvoiceAssess from "./assess/InvoiceAssess";

moment.locale('zh-cn');
const {RangePicker} = DatePicker;
const _ = require('lodash');
const {Option} = Select;
const {TabPane} = Tabs;
const title = '采购单';

@Form.create()
@connect(({
            user,
            global,
            dict,
            vendor,store,
            procure
          }) => ({...user, ...global, ...procure, ...dict,...store, ...vendor}))
export default class Assess extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const {dispatch} = this.props;
    const payload = this.props.form.getFieldsValue();
    _.map(payload, (value, key) => {
      console.log('procure find payload', value);
      if (value === '') {
        payload[key] = undefined;
      }
    });
    dispatch && dispatch({
      type: 'procure/findMaterialRecordMany',
      payload
    });
    this.props.dispatch({
      type: 'procure/procureMaterialLotAssess',
      payload
    });
  }

  getSearchFields = () => {
    return [
      // <FormField
      //   label="物料名称"
      //   name="name"
      //   key={0}
      // >
      //   <Input allowClear placeholder={`请输入${title}名称`}/>
      // </FormField>,
      // <FormField
      //   label="编码"
      //   name="code"
      //   key={1}
      // >
      //   <Input allowClear placeholder={`请输入${title}编码`}/>
      // </FormField>,
      <FormField
        label="供应商"
        name="vendor"
        key={2}
      >
        <Input allowClear placeholder="请输入供应商"/>
      </FormField>,

      <FormField
        label="创建时间"
        name="createdTs"
        key={3}
        initialValue={[this.getSearchStart1Months(), this.getDefaultSearchEndDate()]}
      >
        <RangePicker allowClear={true}
          // style={{ width: '150%' }}
        />
      </FormField>
      // <FormField
      //   label="审核状态"
      //   name="reviewStatus"
      //   key={4}
      // >
      //   <Select allowClear placeholder="请选择">
      //     <Option value={'待审核'}>{'待审核'}</Option>
      //     <Option value={'同意'}>{'同意'}</Option>
      //     <Option value={'驳回'}>{'驳回'}</Option>
      //   </Select>
      // </FormField>
    ];
  };

  cols() {
    return [
      {
        title: "物料编码", dataIndex: 'code', key: 'code', fixed: 'left', render: (value, record) => {
          const {code, name, unit} = record;
          return this.getProductionElement(code, name, unit);
        }
      },
      {title: "采购单编码", dataIndex: 'procureOrderCode', key: 'procureOrderCode'},
      {title: "形态", dataIndex: 'subcategory', key: 'subcategory'},
      {title: "物料规格", dataIndex: 'spec', key: 'spec'},
      {title: "物料编号", dataIndex: 'number', key: 'number'},
      {title: "供应商", dataIndex: 'vendor', key: 'vendor'},
      {title: "去向", dataIndex: 'target', key: 'target'},
      {title: "单价", dataIndex: 'price', key: 'price'},
      {title: "采购数量", dataIndex: 'count', key: 'count'},
      {title: "占用数量", dataIndex: 'useCount', key: 'useCount'},
      {
        title: "可用数量", dataIndex: 'count', key: 'count', render: (value, record) => {
          const {useCount = 0} = record;
          return <div>{value - useCount}</div>;
        }
      },
      {title: "入库数量", dataIndex: 'inboundCount', key: 'inboundCount'},
      {title: "出库数量", dataIndex: 'outboundCount', key: 'outboundCount'},
      {title: "运费", dataIndex: 'shippingFee', key: 'shippingFee'},
      {
        title: "采购时间", dataIndex: 'createdTs', key: 'createdTs', render: value => {
          return <div>{moment(value).format('YYYY-MM-DD HH:mm:ss')}</div>;
        }
      },
      {
        title: '操作', dataIndex: 'operation', key: 'operation', fixed: 'right',
        width: 160,
        render: (value, record) => {
          return (
            <span>
              {<a style={{marginRight: '6px'}} onClick={() => {
                record.orderCode = record.code;
                this.setState({showDetail: true, record});
              }}>详情</a>}
            </span>
          );
        }
      }
    ];
  }

  getCard = () => {
    const {materialLotAssess = []} = this.props;
    const array = [];
    _.map(materialLotAssess, item => {
      const {title, value, color = '#22F', unit} = item;
      array.push(<Col span={4}>
        <Card>
          <Statistic
            title={title}
            value={value}
            precision={2}
            valueStyle={{color: color}}
            suffix={unit}
          />
        </Card>
      </Col>);
    });
    return array;
  };

  render() {
    return <Form className={styles.content}>

      <Tabs defaultActiveKey="1">
        <TabPane tab="物料采购统计" key="1">
          <ProcureAssess></ProcureAssess>
        </TabPane>
        <TabPane tab="付款支出统计" key="2"
        >
          <PaymentAssess></PaymentAssess>
        </TabPane>
        <TabPane tab="收票统计" key="3"
        >
          <InvoiceAssess></InvoiceAssess>
        </TabPane>
        <TabPane tab="入库统计" key="4"
        >
          <InvoiceAssess></InvoiceAssess>
        </TabPane>
      </Tabs>

    </Form>;

  }
}
